<template>
  <div class="content">
    <el-row style="height: 100%">
      <el-col :span="24" style="height: 100%">
        <el-card shadow="always" style="height: 100%">
          <div class="top-card">
            <img :src="topImgUrl" class="img" />
            <div class="card-right">
              <!-- <p style="font-weight: 700; color: red">
                这是一句测试的代码，时间戳：2024-01-11 14:50
              </p> -->
              <p class="top-text-title"><span>诊断预测算法</span></p>
              <p>
                <span
                  >运行流程包括数据采集、数据预处理、算法训练和推理，根据诊断模型对嵌入式系统的健康状态进行预测和诊断。</span
                >
              </p>
              <div>
                <el-button type="info" @click="jumpTo(1)"
                  ><i class="iconfont icon-add-line"></i>马上开始</el-button
                >
              </div>
            </div>
          </div>
          <div class="bot-card">
            <el-row type="flex" justify="space-between" :gutter="20">
              <el-col :span="8">
                <el-card shadow="always">
                  <div class="bot-card-content">
                    <img :src="botImgUrl[0]" class="img" />
                    <div class="card-right">
                      <p class="top-text-title"><span>数据处理</span></p>
                      <p>
                        <span
                          >通过对原始数据进行清洗、提取和选择特征等处理。</span
                        >
                      </p>
                      <div>
                        <el-button type="primary" @click="jumpTo(1)"
                          ><i class="iconfont icon-add-line"></i
                          >开始数据处理</el-button
                        >
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card shadow="always">
                  <div class="bot-card-content">
                    <img :src="botImgUrl[1]" class="img" />
                    <div class="card-right">
                      <p class="top-text-title"><span>故障诊断</span></p>
                      <p>
                        <span
                          >利用系统的数学模型，通过比较实际输出和理论输出来判断故障的发生。</span
                        >
                      </p>
                      <div>
                        <el-button type="primary" @click="jumpTo(2)"
                          ><i class="iconfont icon-add-line"></i
                          >开始故障诊断</el-button
                        >
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card shadow="always">
                  <div class="bot-card-content">
                    <img :src="botImgUrl[2]" class="img" />
                    <div class="card-right">
                      <p class="top-text-title"><span>故障预测</span></p>
                      <p>
                        <span
                          >通过对历史数据的分析和建模，预测未来数据的变化趋势和周期性变化情况。</span
                        >
                      </p>
                      <div>
                        <el-button type="primary" @click="jumpTo(3)"
                          ><i class="iconfont icon-add-line"></i
                          >开始故障预测</el-button
                        >
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topImgUrl: require("@/assets/img/homepage_top.png"),
      botImgUrl: [
        require("@/assets/img/homepage_bot_1.png"),
        require("@/assets/img/homepage_bot_2.png"),
        require("@/assets/img/homepage_bot_3.png"),
      ],
    };
  },
  mounted() {},
  methods: {
    jumpTo(param) {
      switch (param) {
        case 1:
          this.$router.push("/featureEngineering");
          break;
        case 2:
          this.$router.push("/model/list");
          break;
        case 3:
          this.$router.push("/model/predictList");
          break;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.el-row {
  margin-bottom: 10px;
}
.el-row:last-child {
  margin-bottom: 0;
  border-radius: 3px;
}
.iconfont {
  font-size: 20px;
  margin-right: 8px;
}
.el-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
::v-deep .el-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  //min-height: 100%;
}
.top-card {
  width: 60%;
  height: 300px;
  margin: 2% 20%;
  font-family: "Arial Normal", "Arial", sans-serif;
  //text-align: center;
  font-size: 16px;
  display: flex;
  align-items: flex-start;

  .card-right {
    height: 300px;
    padding-left: 5px;
    div {
      height: 200px;
      display: flex;
      justify-content: center;
      //align-items: center;
    }
    .el-button {
      width: 60%;
      height: 70px;
      font-size: 20px;
    }
  }

  .top-text-title {
    font-size: 20px;
    font-weight: bold;
    color: #545a72;
  }

  .img {
    width: 300px;
    height: 300px;
    display: block;
  }

  span {
    word-wrap: break-word;
    text-transform: none;
  }
}

.bot-card {
  margin-bottom: 2%;
  .top-text-title {
    font-size: 20px;
    font-weight: bold;
    color: #545a72;
  }
  .img {
    padding: 40px 24px 0 0;
    //width: 81px;
    height: 79px;
    display: block;
  }
  span {
    word-wrap: break-word;
    text-transform: none;
  }
}
.bot-card-content {
  display: flex;
}
::v-deep .el-button--info {
  background: rgba(84, 90, 114, 1);
}
::v-deep .el-button--info:hover {
  background: #909399;
}
</style>

